/**
 * 价税分离规则
 */
import React from 'react';
import { connect } from 'react-redux'
import { messages } from "share/common"
import { Tabs } from 'antd'
import PriceTaxRule from './price-tax-rule'
import DeductionSetting from './deduction-setting'
import 'styles/request-and-expense-settings/request-and-expense-settings.scss'

const TabPane = Tabs.TabPane;

class PriceTaxSeperationRule extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tabKey: 'price-tax-rule'
    }
  }

  renderTabs = () => {
    let tabs = [{
      key: 'price-tax-rule',
      name: messages('expense-4.key24')/*价税分离规则*/,
    }, {
      key: 'deduction-setting',
      name: messages('expense-4.key16')/*抵扣设置*/,
    }];
    return (
      tabs.map(tab => <TabPane tab={tab.name} key={tab.key}/>)
    );
  };

  renderContent = () => {
    const { tabKey } = this.state;
    const key2Content = {
      'price-tax-rule': <PriceTaxRule/>,
      'deduction-setting': <DeductionSetting/>,
    };
    return key2Content[tabKey];
  };

  render() {
    const { tabKey } = this.state;
    return (
      <div className="request-and-expense-settings-tab full-height-page">
        <Tabs activeKey={tabKey} onChange={tabKey => this.setState({ tabKey })}>
          {this.renderTabs()}
        </Tabs>
        <div style={{ padding: tabKey === 'price-tax-rule' ? '0 20px' : 0, height: 'calc(100% - 64px)' }}>
          {this.renderContent()}
        </div>
      </div>
    )
  }
}

function mapStateToProps(state) {
  return { }
}

export default connect(mapStateToProps)(PriceTaxSeperationRule)
